<template>
  <h1>猜数字练习</h1>
  <!-- 接收用户输入的数字,用户点击按钮给出结果:"猜大了" "猜小了" "猜对了"-->
  <input type="text" placeholder="请输入1~100之间的整数" v-model="num">
  <button @click="guess()">猜一猜</button>
  <h3>{{result}}</h3>
</template>

<script setup>
  import {ref} from "vue";

  const num = ref('');
  const result = ref('');
  //生成一个随机数 因为x只需要在下方的js代码中使用,所以不需要定义成响应式变量,普通变量即可
  let x = parseInt(Math.random()*100)+1;
  console.log(x);
  const guess = ()=>{
    if (num.value>x){
      result.value='猜大了!';
    }else if (num.value<x){
      result.value='猜小了!';
    }else{
      result.value='猜对了!';
    }
  }
</script>

<style scoped>

</style>